<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://unpkg.com/lodash/lodash.min.js"></script>
        <style>
        .red{color: red}
        .blue{color:blue}
        </style>
    </head>
    <body>
        <div id="app1" :class="{red:isRed,blue:isBlue}">
            Hello World
        </div>

        <div id="app2" :class="classObject">
            Hello World
        </div>
    <script>
        var vm1=new Vue({
            el:'#app1',
            data:{
                isRed:true,
                isBlue:false
            }
        });

        var vm2=new Vue({
            el:'#app2',
            computed:{
                classObject:function(){
                    return{
                        red:true,
                        blue:false
                    }
                }
            }
        });
    </script>
    </body>
</html>